import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import styles from '../assets/style/BaseMap.module.css';
import '../assets/css/BaseMap.css';
const PostNote = React.lazy(() => import('./TransportUser/PostNote.jsx'));
const UserManage = React.lazy(() => import('./Admin/UserManage.jsx'));

const BaseMap = (props) => {
	let map = useSelector((state) => state.baseMap.map);
	const $dispatch = useDispatch();
	useEffect(() => {
		ini_map();
		addOverviewMapControl();
		addScaleLineControl();
		addZoomslider();
		addMousePositionControl();
		$dispatch({
			type: 'baseMap/getMap',
			payload: map,
		});
	}, []);
	const ini_map = () => {
		var docName = 'guanggu'; //doc文档名称
		var docLayer = new Zondy.Map.Doc('', docName, {
			ip: 'localhost',
			port: 6163,
			crossOrigin: 'anonymous', //设置允许跨域下载图片
		});
		map = new ol.Map({
			//设置地图容器挂载到对应的DOM节点
			target: 'map',
			layers: [TiandiMapVector, TiandiMapVector_zhuji, docLayer],
			//设置地图以什么样的方式显示
			view: new ol.View({
				center: [114.37, 30.5],
				projection: 'EPSG:4326',
				zoom: 13,
			}),
		});
	};

	/* 添加鹰眼控件 */
	const addOverviewMapControl = () => {
		//鹰眼控件
		const overviewMapControl = new ol.control.OverviewMap({
			/* 鹰眼控件样式  */
			class: 'ol-overviewmap ol-custom-overviewmap',
			layers: [gaodeImage, gaodeVector],
			/* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
			collapseLabel: '\u00BB',
			/* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
			label: '\u00AB',
			/* 初始为展开显示方式 */
			collapsed: false,
			view: new ol.View({
				projection: 'EPSG:4326',
			}),
		});
		map.addControl(overviewMapControl); //加载鹰眼控件
	};
	const addScaleLineControl = () => {
		//实例化比例尺控件（ScaleLine）
		var scaleLineControl = new ol.control.ScaleLine({
			//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
			units: 'metric',
		});
		map.addControl(scaleLineControl); //加载比例尺控件
	};
	const addZoomslider = () => {
		//实例化ZoomSlider控件并加载到地图容器中
		var zoomslider = new ol.control.ZoomSlider();
		map.addControl(zoomslider); //加载ZoomSlider控件
	};
	// 实例化鼠标位置控件（MousePosition）
	const addMousePositionControl = () => {
		const mousePositionControl = new ol.control.MousePosition({
			/* 坐标格式 */
			coordinateFormat: ol.coordinate.createStringXY(4),
			//地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
			projection: 'EPSG:4326',
			/* 坐标信息显示样式类名,默认是'ol-mouse-position' */
			className: 'custom-mouse-position',
			target: document.getElementById('mouse-position'), //显示鼠标位置信息的目标容器
			undefinedHTML: '&nbsp', //未定义坐标的标记
		});
		map.addControl(mousePositionControl); //加载鼠标位置控件
	};

	return (
		<div
			id="map"
			className={styles.container}
			style={{
				width: props.isCollapsed ? '93%' : '86%',
				transition: 'all 0.3s ease',
			}}
		>
			<PostNote
				itemkey={props.itemkey}
				resetItemkey={props.resetItemkey}
			></PostNote>
			<UserManage
				resetItemkey={props.resetItemkey}
				itemkey={props.itemkey}
			></UserManage>
		</div>
	);
};

export default BaseMap;
